import type { App } from "vue";
import { useUserInfoStore } from "@/stores/userInfo";

const registerPermissionDirective = (app: App) => {
  app.directive("permission", (el, binding) => {
    // 注册（函数形式的指令）
    // el:元素对象 binding:指令信息对象
    // console.log(el, binding);
    // 这会在 `mounted` 和 `updated` 时都调用
    const userInfoStore = useUserInfoStore();
    // 如果不包含，把自己删除
    if (!userInfoStore.buttons.includes(binding.value)) {
      el.remove();
    }
  });
};
export default registerPermissionDirective;
/*
按钮权限控制
2.自定义全局指令 v-permission="'btn-Role-remove'"
  - directives/permission.ts文件中，定义函数registerPermissionDirective注册全局指令
  - main.js中在挂载前全局注册指令
  - 组件中使用， v-permission="'btn-Role-remove'"
最优方案，只需要引入一次pinia,注册一次，全局使用
而且不局限元素，不止按钮
*/
